<!DOCTYPE html>
<!--[if lte IE 6]>            <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if IEMobile 7]>          <html class="no-js iem7" lang="en"> <![endif]-->
<!--[if (IE 7)&(!IEMobile)]>  <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
<!--[if IE 8]>                <html class="no-js lt-ie9" lang="en"> <![endif]-->
<!--[if (gte IE 9)|(gt IEMobile 7)]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head>
  <meta charset="utf-8">
  <title>callmepieman.com styleguide</title>

  <meta name="description" content="">
  <meta name="generator" content="kss-node">
  <meta name="viewport" content="width=device-width">

  <link rel="stylesheet" href="public/kss.css">
  <link rel="stylesheet" href="dist/styles.css">
<link rel="stylesheet" href="src/docs/styleguide.css">

</head>
<body id="kss-node">
<div class="kss-sidebar kss-style">
  <header class="kss-header">
    <h1 class="kss-doc-title">callmepieman.com styleguide</h1>
  </header>
  <nav class="kss-nav">
    <ul class="kss-nav__menu">
      <li class="kss-nav__menu-item">
        <a href="./">
          <span class="kss-nav__ref">0</span
          ><span class="kss-nav__name">Overview</span>
        </a>
      </li>
      <li class="kss-nav__menu-item">
        <a href="section-base.html">
          <span class="kss-nav__ref">1</span
          ><span class="kss-nav__name">Base</span>
        </a>
      </li>
      <li class="kss-nav__menu-item">
        <a href="section-components.html">
          <span class="kss-nav__ref">2</span
          ><span class="kss-nav__name">Components</span>
        </a>
      </li>
      <li class="kss-nav__menu-item">
        <a href="section-dependencies.html">
          <span class="kss-nav__ref">3</span
          ><span class="kss-nav__name">Dependencies</span>
        </a>
      </li>
      <li class="kss-nav__menu-item">
        <a href="section-regions.html">
          <span class="kss-nav__ref">4</span
          ><span class="kss-nav__name">Regions</span>
        </a>
        <ul class="kss-nav__menu-child">
            <li class="kss-nav__menu-item">
              <a href="section-regions.html#kssref-regions-app">
                <span class="kss-nav__ref ">4.1</span
                ><span class="kss-nav__name">App.</span>
              </a>
            </li>
            <li class="kss-nav__menu-item">
              <a href="section-regions.html#kssref-regions-chat">
                <span class="kss-nav__ref ">4.2</span
                ><span class="kss-nav__name">Chat</span>
              </a>
            </li>
            <li class="kss-nav__menu-item">
              <a href="section-regions.html#kssref-regions-content">
                <span class="kss-nav__ref ">4.3</span
                ><span class="kss-nav__name">Content</span>
              </a>
            </li>
            <li class="kss-nav__menu-item">
              <a href="section-regions.html#kssref-regions-header">
                <span class="kss-nav__ref ">4.4</span
                ><span class="kss-nav__name">Header.</span>
              </a>
            </li>
            <li class="kss-nav__menu-item">
              <a href="section-regions.html#kssref-regions-tab">
                <span class="kss-nav__ref ">4.5</span
                ><span class="kss-nav__name">Tab</span>
              </a>
            </li>
            <li class="kss-nav__menu-item">
              <a href="section-regions.html#kssref-regions-tab-form">
                <span class="kss-nav__ref kss-nav__ref-child">4.5.1</span
                ><span class="kss-nav__name">Tab form.</span>
              </a>
            </li>
            <li class="kss-nav__menu-item">
              <a href="section-regions.html#kssref-regions-tab-list">
                <span class="kss-nav__ref kss-nav__ref-child">4.5.2</span
                ><span class="kss-nav__name">Tab list</span>
              </a>
            </li>
            <li class="kss-nav__menu-item">
              <a href="section-regions.html#kssref-regions-video">
                <span class="kss-nav__ref ">4.6</span
                ><span class="kss-nav__name">Video</span>
              </a>
            </li>
        </ul>
      </li>
    </ul>
  </nav>
</div>
<article role="main" class="kss-main">

      <div     id="kssref-regions" class="kss-section kss-section--depth-1">

    <div class="kss-style">
      <h1 class="kss-title kss-title--level-1">
        <a class="kss-title__permalink" href="#kssref-regions">
          <span class="kss-title__ref">
              4
            <span class="kss-title__permalink-hash">
                #regions
            </span>
          </span>
          Regions
        </a>
      </h1>


      <div class="kss-description">
        <p>Regions are modules of the page.</p>

      </div>
    </div>


      </div>
      <section id="kssref-regions-app" class="kss-section kss-section--depth-2">

    <div class="kss-style">
      <h2 class="kss-title kss-title--level-2">
        <a class="kss-title__permalink" href="#kssref-regions-app">
          <span class="kss-title__ref">
              4.1
            <span class="kss-title__permalink-hash">
                #regions.app
            </span>
          </span>
          App.
        </a>
      </h2>


      <div class="kss-description">
        <p>Defines the main app region</p>

      </div>
    </div>

      <div class="kss-modifier__wrapper">
        <div class="kss-modifier__heading kss-style">
          Example
        </div>
        <div class="kss-modifier__example">
          <div class="kss-container color-black debug">
    .container
    <div class="app debug">
        .app
    </div>
</div>

        </div>
      </div>

      <div class="kss-markup kss-style">
        <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;div class=&quot;kss-container color-black debug&quot;&gt;
    .container
    &lt;div class=&quot;app debug&quot;&gt;
        .app
    &lt;/div&gt;
&lt;/div&gt;
</code></pre>
      </div>

      </section>
      <section id="kssref-regions-chat" class="kss-section kss-section--depth-2">

    <div class="kss-style">
      <h2 class="kss-title kss-title--level-2">
        <a class="kss-title__permalink" href="#kssref-regions-chat">
          <span class="kss-title__ref">
              4.2
            <span class="kss-title__permalink-hash">
                #regions.chat
            </span>
          </span>
          Chat
        </a>
      </h2>


      <div class="kss-description">
        <p>Defines the chat region</p>

      </div>
    </div>

      <div class="kss-modifier__wrapper">
        <div class="kss-modifier__heading kss-style">
          Example
        </div>
        <div class="kss-modifier__example">
          <div class=" kss-container color-black debug">
    .container
    <div class="chat debug">
        .chat
    </div>
</div>

        </div>
      </div>

      <div class="kss-markup kss-style">
        <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;div class=&quot; kss-container color-black debug&quot;&gt;
    .container
    &lt;div class=&quot;chat debug&quot;&gt;
        .chat
    &lt;/div&gt;
&lt;/div&gt;
</code></pre>
      </div>

      </section>
      <section id="kssref-regions-content" class="kss-section kss-section--depth-2">

    <div class="kss-style">
      <h2 class="kss-title kss-title--level-2">
        <a class="kss-title__permalink" href="#kssref-regions-content">
          <span class="kss-title__ref">
              4.3
            <span class="kss-title__permalink-hash">
                #regions.content
            </span>
          </span>
          Content
        </a>
      </h2>


      <div class="kss-description">
        <p>Defines the content region</p>

      </div>
    </div>

      <div class="kss-modifier__wrapper">
        <div class="kss-modifier__heading kss-style">
          Example
        </div>
        <div class="kss-modifier__example">
          <div class="kss-container color-black debug">
    .container
    <div class="content debug">
        .content
    </div>
</div>

        </div>
      </div>

      <div class="kss-markup kss-style">
        <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;div class=&quot;kss-container color-black debug&quot;&gt;
    .container
    &lt;div class=&quot;content debug&quot;&gt;
        .content
    &lt;/div&gt;
&lt;/div&gt;
</code></pre>
      </div>

      </section>
      <section id="kssref-regions-header" class="kss-section kss-section--depth-2">

    <div class="kss-style">
      <h2 class="kss-title kss-title--level-2">
        <a class="kss-title__permalink" href="#kssref-regions-header">
          <span class="kss-title__ref">
              4.4
            <span class="kss-title__permalink-hash">
                #regions.header
            </span>
          </span>
          Header.
        </a>
      </h2>


      <div class="kss-description">
        <p>Defines the header region</p>

      </div>
    </div>

      <div class="kss-modifier__wrapper">
        <div class="kss-modifier__heading kss-style">
          Example
        </div>
        <div class="kss-modifier__example">
          <div class="kss-container color-black debug">
    .container
    <div class="header debug">
        .header
    </div>
</div>

        </div>
      </div>

      <div class="kss-markup kss-style">
        <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;div class=&quot;kss-container color-black debug&quot;&gt;
    .container
    &lt;div class=&quot;header debug&quot;&gt;
        .header
    &lt;/div&gt;
&lt;/div&gt;
</code></pre>
      </div>

      </section>
      <section id="kssref-regions-tab" class="kss-section kss-section--depth-2">

    <div class="kss-style">
      <h2 class="kss-title kss-title--level-2">
        <a class="kss-title__permalink" href="#kssref-regions-tab">
          <span class="kss-title__ref">
              4.5
            <span class="kss-title__permalink-hash">
                #regions.tab
            </span>
          </span>
          Tab
        </a>
      </h2>


      <div class="kss-description">
        <p>Tab region</p>

      </div>
    </div>


      </section>
      <section id="kssref-regions-tab-form" class="kss-section kss-section--depth-3">

    <div class="kss-style">
      <h3 class="kss-title kss-title--level-3">
        <a class="kss-title__permalink" href="#kssref-regions-tab-form">
          <span class="kss-title__ref">
              4.5.1
            <span class="kss-title__permalink-hash">
                #regions.tab.form
            </span>
          </span>
          Tab form.
        </a>
      </h3>


      <div class="kss-description">
        <p>Form to manage tabs.</p>

      </div>
    </div>

      <div class="kss-modifier__wrapper">
        <div class="kss-modifier__heading kss-style">
          Example
        </div>
        <div class="kss-modifier__example">
          <div class="tab">
    <form class="tab-form">
        <label for="tab-form--label"
               class="tab-form--label">
            .tab-form--label
        </label>
        <input type="text"
               class="tab-form--input color-black"
               placeholder=".tab-form--input" />
    </form>
</div>

        </div>
      </div>

      <div class="kss-markup kss-style">
        <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;div class=&quot;tab&quot;&gt;
    &lt;form class=&quot;tab-form&quot;&gt;
        &lt;label for=&quot;tab-form--label&quot;
               class=&quot;tab-form--label&quot;&gt;
            .tab-form--label
        &lt;/label&gt;
        &lt;input type=&quot;text&quot;
               class=&quot;tab-form--input color-black&quot;
               placeholder=&quot;.tab-form--input&quot; /&gt;
    &lt;/form&gt;
&lt;/div&gt;
</code></pre>
      </div>

      </section>
      <section id="kssref-regions-tab-form-input" class="kss-section kss-section--depth-4">

    <div class="kss-style">
      <h4 class="kss-title kss-title--level-4">
        <a class="kss-title__permalink" href="#kssref-regions-tab-form-input">
          <span class="kss-title__ref">
              4.5.1.1
            <span class="kss-title__permalink-hash">
                #regions.tab.form.input
            </span>
          </span>
          Form tab input.
        </a>
      </h4>


    </div>


      </section>
      <section id="kssref-regions-tab-form-label" class="kss-section kss-section--depth-4">

    <div class="kss-style">
      <h4 class="kss-title kss-title--level-4">
        <a class="kss-title__permalink" href="#kssref-regions-tab-form-label">
          <span class="kss-title__ref">
              4.5.1.2
            <span class="kss-title__permalink-hash">
                #regions.tab.form.label
            </span>
          </span>
          Form tab label.
        </a>
      </h4>


    </div>


      </section>
      <section id="kssref-regions-tab-list" class="kss-section kss-section--depth-3">

    <div class="kss-style">
      <h3 class="kss-title kss-title--level-3">
        <a class="kss-title__permalink" href="#kssref-regions-tab-list">
          <span class="kss-title__ref">
              4.5.2
            <span class="kss-title__permalink-hash">
                #regions.tab.list
            </span>
          </span>
          Tab list
        </a>
      </h3>


    </div>

      <div class="kss-modifier__wrapper">
        <div class="kss-modifier__heading kss-style">
          Example
        </div>
        <div class="kss-modifier__example">
          <div class="kss-container color-black">
    .container
    <div class="tab">
        .tab
        <ul class="tab-list color-white">
            .tab-list
            <li class="tab-item color-white">
                .tab-item
                <a href="#" class="tab-item--link">.tab-item--link</a>
            </li>
            <li class="tab-item color-white">
                .tab-item
                <a href="#" class="tab-item--add">.tab-item--add</a>
            </li>
        </ul>
    </div>
</div>

        </div>
      </div>

      <div class="kss-markup kss-style">
        <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;div class=&quot;kss-container color-black&quot;&gt;
    .container
    &lt;div class=&quot;tab&quot;&gt;
        .tab
        &lt;ul class=&quot;tab-list color-white&quot;&gt;
            .tab-list
            &lt;li class=&quot;tab-item color-white&quot;&gt;
                .tab-item
                &lt;a href=&quot;#&quot; class=&quot;tab-item--link&quot;&gt;.tab-item--link&lt;/a&gt;
            &lt;/li&gt;
            &lt;li class=&quot;tab-item color-white&quot;&gt;
                .tab-item
                &lt;a href=&quot;#&quot; class=&quot;tab-item--add&quot;&gt;.tab-item--add&lt;/a&gt;
            &lt;/li&gt;
        &lt;/ul&gt;
    &lt;/div&gt;
&lt;/div&gt;
</code></pre>
      </div>

      </section>
      <section id="kssref-regions-video" class="kss-section kss-section--depth-2">

    <div class="kss-style">
      <h2 class="kss-title kss-title--level-2">
        <a class="kss-title__permalink" href="#kssref-regions-video">
          <span class="kss-title__ref">
              4.6
            <span class="kss-title__permalink-hash">
                #regions.video
            </span>
          </span>
          Video
        </a>
      </h2>


      <div class="kss-description">
        <p>Defines the video region</p>

      </div>
    </div>

      <div class="kss-modifier__wrapper">
        <div class="kss-modifier__heading kss-style">
          Example
        </div>
        <div class="kss-modifier__example">
          <div class="kss-container color-black debug">
    .container
    <div class="video color-black debug">
        .video
        <div class="video-iframe debug">
            .video-iframe
        </div>
    </div>
</div>

        </div>
      </div>

      <div class="kss-markup kss-style">
        <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;div class=&quot;kss-container color-black debug&quot;&gt;
    .container
    &lt;div class=&quot;video color-black debug&quot;&gt;
        .video
        &lt;div class=&quot;video-iframe debug&quot;&gt;
            .video-iframe
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;
</code></pre>
      </div>

      </section>
</article>

<!-- SCRIPTS -->
<script src="public/kss.js"></script>
<script src="public/prettify.js"></script>
<script>
  prettyPrint();
</script>
<script src="node_modules/jquery/dist/jquery.min.js"></script>



<!-- Automatically generated using <a href="https://github.com/kss-node/kss-node">kss-node</a>. -->
</body>
</html>
